/**
 * api分类: 数据渲染
 */
// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]

//定义html代码片段
let apiTypeDataHtml = '';
//组装html代码
apiTypeData.forEach(function(v, i) {
    console.log(v, i);

    apiTypeDataHtml += `
        <a href="#" data-keyword="${v.keyword}" class="${i===0?'active':''} ${v.isnew?'bold':''}">${v.name}</a>
    `
})

//渲染html代码片段到页面
$('.sort-api-nav').innerHTML = apiTypeDataHtml;


/**
 *  点击api分类菜单，切换数据
 * 
 * 
 */
$('.sort-api-nav').addEventListener('click', function(e) {
    //筛选指定标签
    if (e.target.nodeName === 'A') {
        //设置搜索文本
        $('.sort-api-search p').textContent = e.target.textContent;
        //设置关键字
        $('.sort-api-search input').placeholder = e.target.dataset.keyword;

    }
})

/***
 * api列表渲染
 * 
 */
//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
]

//定义html代码片段
let listDataHTML = '';
//组装html代码片段
listDataArr.forEach(function(v) {
    listDataHTML += `
        <li>
            <a href="../apidetail/apidetail.html">
                <div class="list-item">
                    <img src="../../assets/imgs/${v.img}" alt="">
                    <p class="desc">${v.name}</p>
                    <p class="${v.price==='免费' ? 'green' : 'red'}">${v.price}</p>
                </div>
            </a>
            <span class="top ${v.isSpecial ? 'dblock': 'dnone'}">企业专用</span>
            <div class="btn">申请数据</div>
        </li>
    `
})

//渲染html代码到页面中
$('.ulList').innerHTML = listDataHTML;


// tap选项卡
let li = $a('.tap-top-item');
let boxTap = $a('.tap-box');
// console.log(li);


li.forEach(function(value, index) {
    // console.log(value);

    // 事件注册 点击事件
    value.addEventListener('click', function() {
        li.forEach(function(v, i) {
                v.className = '';
                boxTap[i].style.display = 'none';
            })
            // 给菜单添加类名
        this.className = 'active';
        boxTap[index].style.display = 'block';
    })
})

//事件注册 
//点击apply-data显示蒙层
$('.ulList').addEventListener('click', function(e) {
    console.log(1);


    //筛选出类名为btn的目标元素
    if (e.target.classList.contains('btn')) {
        $('.mask').style.display = 'block';
    }
})


//点击蒙层关闭模态框
$('.mask').addEventListener('click', function() {
    this.style.display = 'none';
})

//点击模态框 阻止事件传播
$('.mask-box').addEventListener('click', function(e) {
    //阻止事件传播
    e.stopPropagation();
})


//判断输入的账号的长度是否大于0 是：显示删除按钮 否则隐藏
//事件注册 input：输入事件 
$('#uesr-name').addEventListener('input', function() {
    if (this.value.length > 0) {
        $('.delete').style.display = 'block';
    } else {
        $('.delete').style.display = 'none';
    }
    // 如果输入框的值为空清除错误提示文字
    if (this.value === '') $('.accountTips').textContent = '';
})


//判断输入的密码的长度是否大于0 是：显示图标 否则隐藏
//事件注册
$('#pwd').addEventListener('input', function() {
    if (this.value.length > 0) {
        $('.delete2').style.display = 'block';
    } else {
        $('.delete2').style.display = 'none';
    }
    // 如果输入框的值为空清除错误提示文字
    if (this.value === '') $('.passwordTips').textContent = '';
})


//点击删除按钮时，清空输入框，并隐藏按钮
//事件注册
$('.delete').addEventListener('click', function() {
    $('#uesr-name').value = '';
    this.style.display = 'none';
    $('.accountTips').textContent = '';
})
$('.delete2').addEventListener('click', function() {
    $('#pwd').value = '';
    this.style.display = 'none';
    $('.passwordTips').textContent = '';
})


//失去焦点验证用户名是否合法，并给出相应提示
//定义变量保存验证用户名的正则表达式
let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
//事件注册 blur
$('#uesr-name').addEventListener('blur', function() {
    // console.log(1);
    //判断输入的用户名是否合法
    let bool = reg.test(this.value); //test()检测字符串是否匹配某种格式
    bool ? $('.accountTips').textContent = '' : $('.accountTips').textContent = '用户名格式不正确';
})



//失去焦点验证密码是否合规，并给出相应提示
//定义变量保存验证密码的正则表达式
let regx = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
//事件注册 blur
$('#pwd').addEventListener('blur', function() {
    // console.log(2);
    //判断输入的密码是否合规
    let bool = regx.test(this.value); //test()检测字符串是否匹配某种格式
    if (bool) {
        $('.passwordTips').textContent = '';
    } else {
        $('.passwordTips').textContent = '密码格式不正确';
    }
})


//点击登录按钮，验证用户名以及密码
//事件注册
$('.submitBtn').addEventListener('click', function() {
    // console.log(1);

    //提交只判断失败的情况，正确直接跳转
    if (!reg.test($('#uesr-name').value)) {
        //判断用户名情况
        $('.accountTips').textContent = '用户名格式不正确';
        return
    } else if (!regx.test($('#pwd').value)) {
        //判断密码情况
        $('.passwordTips').textContent = '密码格式不正确';
        return
    }
    location.href = '../home/home.html';
})